<template>
  <div class="box">
    <header class="header">
      <div class="left">
        <div @click="goBack" class="iconfont icon-zuojiantou1"></div>
        <h1>上传菜谱</h1>
      </div>
      <div @click="updata" class="updata">发布</div>
    </header>
    <div class="content">
      <div class="head">
        <el-upload
          @click.native="goCancel"
          action="http://10.8.162.94:8082/greens/ossupload/aaa"
          list-type="picture-card"
          v-model="foodCover"
          :on-preview="handlePictureCardPreview"
          :auto-upload="false"
          :on-remove="handleRemove">
          <i class="el-icon-plus">上传封面</i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <!-- 菜名 -->
        <el-input
          placeholder="添加菜谱名"
          v-model="foodName"
          clearable>
        </el-input>
        <!-- 故事 -->
        <el-input
          type="textarea"
          :rows="2"
          placeholder="这道菜背后的故事"
          v-model="foodStory">
        </el-input>
      </div>
      <div class="step">
        <div class="body">
          <div class="head">
            <p class="time">时间：
              <template>
                <el-select v-model="foodNeedTime" placeholder="请选择">
                  <el-option
                    v-for="item of optionsTime"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </p>
            <p class="difficulty">难度：
              <template>
                <el-select v-model="foodDifficulty" placeholder="请选择">
                  <el-option
                    v-for="itm of options"
                    :key="itm.value"
                    :label="itm.label"
                    :value="itm.value">
                  </el-option>
                </el-select>
              </template>
            </p>
          </div>
          <div class="foodlist">
            <h1>添加食材</h1>
            <div v-for="item of num" :key="item" class="demo-input-suffix">
              <el-input
                key="item.id"
                placeholder="食材：如五花肉"
                v-model="addFoodStuffName">
              </el-input>
              <el-input
                placeholder="用量：如2500g"
                v-model="addFoodStuffWeight">
              </el-input>
            </div>
            <div @click="num += 1" class="add">再添加一种食材</div>
            <div @click="num -= 1" class="reduce">撤销</div>
          </div>
          <div class="cook_step">
            <h1>烹饪步骤</h1>
            <div v-for="(item, index) of stepNum" :key="item">
              <h2>第{{ index+1 }}步</h2>
              <div class="addStep">
                <el-upload
                  action="http://10.8.162.94:8082/greens/ossupload/aaa"
                  list-type="picture-card"
                  v-model="stepUrl"
                  :on-preview="handlePictureCardPreview"
                  :auto-upload="false"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="步骤详情"
                  v-model="stepName">
                </el-input>
              </div>
              
            </div>
            <div @click="stepNum += 1" class="add">增加一步</div>
            <div @click="stepNum -= 1" class="reduce">撤销</div>
            
          </div>
          <div class="tips" title="">小贴士
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="tips">
            </el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { Actionsheet, Toast } from 'mint-ui'
Vue.use(Actionsheet, Toast)
export default {
  data () {
    return {
      num: 1,
      stepNum: 1,
      id: '',
      dialogImageUrl: '',
      dialogVisible: false,
      optionsTime: [{
        value: '选择1',
        label: '10分钟左右'
      }, {
        value: '选择2',
        label: '10-30分钟'
      }, {
        value: '选择3',
        label: '30-60分钟'
      }, {
        value: '选择4',
        label: '1小时以上'
      }],
      options: [{
        value: '选项1',
        label: '初级'
      }, {
        value: '选项2',
        label: '中级'
      }, {
        value: '选项3',
        label: '高级'
      }],
      isShow: true,
      // foodId: '',
      foodCover: '',
      foodName: '',
      foodStory: '',
      // foodType: '',
      foodNeedTime: '',
      foodDifficulty: '',
      // userName: '',
      // userId: '',
      addFoodStuffName: [],
      addFoodStuffWeight: [],
      addFoodStuffId: [],
      stepId: [],
      stepName: [],
      stepUrl: [],
      createTime: [],
      tips: [],

    }
  },
  methods: {
    goCancel() {
      console.log(111)
      this.isShow = false
    },
    updata() {
      Toast('发布......')
      console.log('发布')
    },
    goBack() {
      this.$router.go(-1)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    updata() {
      axios.post('http://10.8.162.81:8082/greens/addGreens', {
        foodCover: this.foodCover,
        foodName: this.foodName,
        foodStory: this.foodStory,
        foodNeedTime: this.foodNeedTime,
        foodDifficulty: this.foodDifficulty
      }).then(data => {
          console.log(data)
        })
    }
  },
  created () {
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.box {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    .left {
      display: flex;
      align-items: center;
      margin-left: 15px;
      h1 {
        margin-left: 30px;
      }
    }
    .updata {
      margin-right: 15px;
      font-size: 14px;
      font-weight: 600;
    }
  }
  .content {
    width: 90%;
    margin: 10px auto;
    .head {
      display: flex;
      flex-direction: column;
      
    }
    .step {
      .body {
        .head {
          .time {
            .el-select {
              &.el-input--suffix {
                margin: 0!important;
                border: 0!important;
              }
            }
          }
        }
        .foodlist {
          border-bottom: 1px solid #ccc;
          height: auto;
          padding-bottom: 30px;
          .add {
            color: rgb(104, 104, 245);
            float: left;
          }
          .reduce {
            color: rgb(104, 104, 245);
            float: right;
            margin-right: 20px;
          }
        }
        .cook_step {
          padding: 30px 0;
          border-bottom: 1px solid #ccc;
          div {
            h2 {
              margin: 20px 0 10px 0;
            }
          }
          .add {
            color: rgb(104, 104, 245);
            float: left;
            height: 30px;
          }
          .reduce {
            color: rgb(104, 104, 245);
            float: right;
            margin-right: 20px;
          }
        }
        .tips {
          padding: 30px 0;
          font-weight: 800;
        }
      }
    }
  }
}

</style>

<style lang="scss">
.el-upload--picture-card {
  width: 100%!important;
  li {
    width: 100%!important;
  }
}
.el-input--suffix {
  margin: 10px 0;
  .el-input__inner {
    border: none;
  }
}
.el-textarea {
  margin: 10px 0;
  .el-textarea__inner {
    border: 0;
  }
}
.foodlist {
  h1 {
    margin-top: 30px;
  }
  .demo-input-suffix {
    margin: 10px 0;
    display: flex;
    .el-input {
      input {
        border: 0;
      }
    }
  }
}
</style>
